<template>
  <div class="handle">
    <div class="typearea">
      <!-- 左边布局 -->
      <div class="leftlist">
        <!-- 标题 -->
        <div class="handletitle">
          <h2>张惠妹</h2>
          <h3>萝卜</h3>
        </div>
        <!-- 照片 -->
        <div class="Content_area">
          <img class="Content_areaimg" src="./imagea.jpg" alt="" />
          <img class="Content_areaimgsecond" alt="" />
          <div class="buttons">
            <router-link to="" class="el-icon-user-solid"
              >&nbsp;&nbsp;&nbsp;个人主页</router-link
            >
            <router-link to="" class="el-icon-folder-add">收藏</router-link>
          </div>
        </div>

        <div class="navigation">
          <ul class="navigationul">
            <li class="navigationli">热门作品</li>
            <li>所有专辑</li>
            <li>相关MV</li>
            <li class="navigationyi">艺人介绍</li>
          </ul>
        </div>
        <div class="artist_top50">
          <!-- 三个按钮 -->
          <div class="m_info">
            <div class="delivery">
              <span class="el-icon-video-play">播放</span>
              <span class="jiahao">+</span>
            </div>
            <div class="f_fr">
              <svg
                t="1635818189041"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4023"
                width="200"
                height="200"
              >
                <path
                  d="M847.36 322.56H829.44v-46.08c0-50.816-39.34208-92.16-90.15296-92.16h-260.6592l-3.13856-10.24h-0.38912c-13.10208-40.96-50.26304-66.56-92.47744-66.56H176.64C122.99776 107.52 76.8 148.59776 76.8 202.24v619.52c0 53.64224 46.19776 99.84 99.84 99.84h552.96c118.57408 0 212.48-99.02592 212.48-217.6V419.84c0-53.64224-41.07776-97.28-94.72-97.28z m-108.07296-76.8C756.224 245.76 768 259.53792 768 276.48v46.08h-249.87648L496.1792 245.76h243.10784zM870.4 704c0 79.04768-61.75232 145.92-140.8 145.92h-552.96c-14.11584 0-28.16-14.04416-28.16-28.16v-619.52c0-14.11584 14.04416-23.04 28.16-23.04h205.9776c10.93632 0 20.58752 5.59616 24.17152 15.88224l46.81728 163.20512 0.384 0.94208C460.8768 380.3648 480.44032 394.24 502.66624 394.24H847.36c14.11584 0 23.04 11.48416 23.04 25.6v284.16z"
                  p-id="4024"
                ></path>
                <path
                  d="M435.2 476.16H363.52v107.52H256v71.68h107.52v107.52h71.68v-107.52h107.52v-71.68H435.2z"
                  p-id="4025"
                ></path>
              </svg>
              收藏热门50
            </div>
            <div class="filterj_slt">
              <el-dropdown>
                <el-button type="primary">
                  热门单曲<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>热门单曲</el-dropdown-item>
                  <el-dropdown-item>作词作品</el-dropdown-item>
                  <el-dropdown-item>作曲作品</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <!-- 歌单列表 -->
          <div class="containerge">
            <!-- 一行歌曲列表 -->
            <div class="wLIst" v-for="n in 50" :key="n">
              <ul class="liebiaogedna">
                <li class="w1">
                  <div class="xuhao">1</div>
                  <svg
                    t="1635820792095"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2378"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                      p-id="2379"
                    ></path>
                    <path
                      d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                      p-id="2380"
                    ></path>
                  </svg>
                </li>
                <li class="w2">
                  <div>如果你也听说</div>
                  <svg
                    t="1635820930667"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5405"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M919.2 148.4H104.8c-22.1 0-40 17.9-40 40v645c0 22.1 17.9 40 40 40h814.5c22.1 0 40-17.9 40-40v-645c-0.1-22.1-18-40-40.1-40z m-40 645H144.8v-565h734.5v565z"
                      fill="#d81e06"
                      p-id="5406"
                    ></path>
                    <path
                      d="M368.7 687.9c6.2 3.6 13.1 5.4 20 5.4s13.8-1.8 20-5.4l246.6-142.4c12.4-7.1 20-20.4 20-34.6 0-14.3-7.6-27.5-20-34.6L408.7 333.9c-12.4-7.1-27.6-7.1-40 0-12.4 7.1-20 20.4-20 34.6v284.7c0 14.4 7.6 27.6 20 34.7z m60-250.1l126.6 73.1L428.7 584V437.8z"
                      fill="#d81e06"
                      p-id="5407"
                    ></path>
                  </svg>
                </li>
                <li class="w3">
                  <div>99.99</div>
                </li>
                <li class="w4">玛卡巴卡呀</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边布局 -->
      <div class="rightlist">
        <div class="g_wrap7">
          <!-- 标题 -->
          <h3 class="handlewrap"><div>相似歌手</div></h3>
          <!-- 6个相似图片 -->
          <div class="m_hdlist_f_cb">
            <ul class="hd">
              <router-link to=""
                ><li>
                  <img src="./imagea.jpg" alt="" />
                  <div>萝卜</div>
                </li></router-link
              >

              <router-link to=""
                ><li>
                  <img src="./imagea.jpg" alt="" />
                  <div>萝卜</div>
                </li></router-link
              >
              <router-link to=""
                ><li>
                  <img src="./imagea.jpg" alt="" />
                  <div>萝卜</div>
                </li></router-link
              >
              <router-link to=""
                ><li>
                  <img src="./imagea.jpg" alt="" />
                  <div>萝卜</div>
                </li></router-link
              >
              <router-link to=""
                ><li>
                  <img src="./imagea.jpg" alt="" />
                  <div>萝卜</div>
                </li></router-link
              >
              <router-link to=""
                ><li>
                  <img src="./imagea.jpg" alt="" />
                  <div>玛卡巴卡呼咔拉卡</div>
                </li></router-link
              >
            </ul>
          </div>
          <Multiport/>
          <div class="changed">
            <div><router-link to="">补充或修改艺人资料></router-link></div>
            <router-link to="">用户wiki任务中心</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Multiport from '../../../components/Multiport-right'
// import { mapState, mapActions } from 'vuex'
export default {
  name:"artistList",
  methods: {
    // vux数据逻辑
  },
  mounted() {
    
  },

  computed: {
  },
  components:{
    Multiport,
  }

}
</script>

<style lang="less">
.handle {
  margin: 0;
  padding: 0;
}
.typearea {
  margin: 0 auto;
  display: flex;
  height: 2000px;
}
//  左边大盒子内容
.leftlist {
  width: 709px;
  border-left: 1px solid red;
  border-right: 1px solid red;
  padding: 47px 30px 40px 39px;
}
// 右边大盒子内容
.rightlist {
  width: 270px;
  border-right: 1px solid red;
  padding: 20px 40px 40px 30px;
}
// 照片
.Content_area {
  width: 640px;
  height: 300px;
  // border: 1px solid red;
  margin: 0 auto;
  position: relative;
}
// 主要内容
.handletitle {
  display: flex;
  padding-bottom: 5px;
  h2 {
    font-size: 24px;
    font-weight: normal;
  }
  h3 {
    font-size: 14px;
    padding-left: 10px;
    line-height: 40px;
    color: #ccc;
  }
}
.Content_areaimg {
  width: 100%;
  height: 100%;
}
.Content_areaimgsecond {
  width: 640px;
  height: 300px;
  background-image: url(https://s2.music.126.net/style/web2/img/ban_mask.png?2481f00ae0d0e2c0897702688967573f);
  position: absolute;
  left: 0px;
  // position: relative;
}
.el-icon-user-solid {
  width: 96px;
  height: 32px;
  border-radius: 0;
  color: #fff;
  font-size: 13px;
  background-color: #333;
  position: absolute;
  top: 240px;
  left: 380px;
  text-align: center;
  line-height: 32px !important;
}
.el-icon-folder-add {
  width: 76px;
  height: 32px;
  font-size: 13px;
  background-color: #333;
  color: #fff;
  position: absolute;
  top: 240px;
  left: 500px;
  text-align: center;
  line-height: 32px !important;
}
.buttons a:hover {
  background-color: #ccc;
  text-decoration: none !important;
}
// 照片下面的导航栏
.navigation {
  width: 638px;
  margin: 0 auto;
  padding-bottom: 20px;
}
.navigationul {
  display: flex;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  li {
    width: 136px;
    height: 39px;
    font-size: 14px;
    background-color: #f8f8f8;
    text-align: center;
    line-height: 39px;
    border-bottom: 1px solid #ccc;
  }
  .navigationli {
    border-top: 1px solid red;
    border-right: 1px solid #ccc;
    border-bottom: hidden;
  }
  .navigationyi {
    width: 250px;
  }
}
.artist_top50 {
  width: 640px;
  margin: 0 auto;
}
.m_info {
  display: flex;
  div {
    width: 89px;
    height: 29px;
    // border: 1px solid red;
    font-size: 12px;
  }
  .delivery {
    display: flex;
    background-color: #2576c4;
    margin-right: 5px;
    border-radius: 5px;
  }
  .el-icon-video-play {
    font-size: 14px;
    padding-bottom: 10px;
    line-height: 29px;
    padding-left: 10px;
  }
  .jiahao {
    display: block;
    width: 30px;
    height: 31px;
    font-size: 20px;
    text-align: center;
    line-height: 28px;
    border-left: 1px solid #ccc;
    margin-left: 4px;
  }
  .f_fr {
    text-align: center;
    line-height: 31px;
    color: black;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  .el-button {
    // margin-left: 330px;
    font: 14px;
    background: #ccc;
    width: 92px;
    height: 31px;
    color: black;
    border: 1px solid #ccc;
    padding: 0px;
  }
  .filterj_slt {
    margin-left: 360px;
  }
  .el-button:hover {
    color: black;
    background: #ccc;
  }
}
.icon {
  width: 16px;
  height: 16px;
  line-height: 16px !important;
}
.filterj_slt {
  width: 90px !important;
  .el-dropdown {
    width: 90px !important;
    background: #fff !important;
  }
}
.wLIst {
  padding-top: 5px;
  line-height: 42px;
}
.liebiaogedna {
  display: flex;
  line-height:30px;
  li {
    height: 18px;
    border-top: 1px solid #ccc;
  }
  .w2 {
    width: 1010px;
  }
  .w3 div {
    padding-right: 60px;
  }
}
.w1 {
  width: 71px;
  font-size: 12px;
  padding: 6px 10px;
  display: flex;
  .xuhao {
    padding-right: 47px;
    line-height: 18px;
    margin: 0;
  }
  svg.icon {
    padding-top: 1px;
  }
}
.w2 {
  display: flex;
  height: 20px;
  line-height: 30px;
  padding-left: 10px;
  div {
    padding-right: 10px;
  }
  svg.icon {
    padding-top: 6px;
  }
}
.w3 {
  width: 89px;
  height: 13px;
}
.w4 {
  width: 100%;
}
// 右边样式
.handlewrap div {
  width: 200px;
  font-size: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.handlewrap {
  padding-bottom: 20px;
}
.m_hdlist_f_cb {
  padding-bottom: 10px;
}
.hd {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.hd li img {
  width: 50px;
  height: 50px;
}
.hd li {
  height: 92px;
  padding-right: 16px;
}
.hd li div {
  width: 50px;
  padding: 5px 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.changed {
  padding-top: 20px;
}
</style>
